<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<title>电子银行——》汇款充值</title>
<style>
* {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
		sans-serif;
}

.tab-head {
	margin-left: 120px;
	margin-bottom: 10px;
}

.tab-content {
	clear: left;
	display: none;
}

h2 {
	border-bottom: solid #02aaf1 2px;
	width: 200px;
	height: 25px;
	margin: 0;
	float: left;
	text-align: center;
	font-size: 16px;
}

.selected {
	color: #FFFFFF;
	background-color: #02aaf1;
}

.show {
	clear: left;
	display: block;
}

.hidden {
	display: none;
}

.new-btn-login-sp {
	padding: 1px;
	display: inline-block;
	width: 75%;
}

.new-btn-login {
	background-color: #02aaf1;
	color: #FFFFFF;
	font-weight: bold;
	border: none;
	width: 100%;
	height: 30px;
	border-radius: 5px;
	font-size: 16px;
}

#main {
	width: 100%;
	margin: 0 auto;
	font-size: 14px;
}

.red-star {
	color: #f00;
	width: 10px;
	display: inline-block;
}

.null-star {
	color: #fff;
}

.content {
	margin-top: 5px;
}

.content dt {
	width: 100px;
	display: inline-block;
	float: left;
	margin-left: 20px;
	color: #666;
	font-size: 13px;
	margin-top: 8px;
}

.content dd {
	margin-left: 120px;
	margin-bottom: 5px;
}

.content dd input {
	width: 85%;
	height: 28px;
	border: 0;
	-webkit-border-radius: 0;
	-webkit-appearance: none;
}

#foot {
	margin-top: 10px;
	position: absolute;
	bottom: 15px;
	width: 100%;
}

.foot-ul {
	width: 100%;
}

.foot-ul li {
	width: 100%;
	text-align: center;
	color: #666;
}

.note-help {
	color: #999999;
	font-size: 12px;
	line-height: 130%;
	margin-top: 5px;
	width: 100%;
	display: block;
}

#btn-dd {
	margin: 20px;
	text-align: center;
}

.foot-ul {
	width: 100%;
}

.one_line {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #eeeeee;
	width: 100%;
	margin-left: 20px;
}

.am-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: box;
	width: 100%;
	position: relative;
	padding: 7px 0;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background: #1D222D;
	height: 50px;
	text-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	box-pack: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	box-align: center;
}

.am-header h1 {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	box-flex: 1;
	line-height: 18px;
	text-align: center;
	font-size: 18px;
	font-weight: 300;
	color: #fff;
}
</style>
<script type="text/javascript">
	layui
			.use(
					'layer',
					function() { //独立版的layer无需执行这一句
						var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
						//触发事件
						var active = {
							notice : function() {
								var date = $("#date").val();
								var money = $("#money").val();
								var keywords = $("#keywords").val();
								//示范一个公告层
								layer
										.open({
											type : 1,
											title : "确认汇款信息" //不显示标题栏
											,
											closeBtn : false,
											area : '600px;',
											shade : 0.8,
											id : 'LAY_layuipro' //设定一个id，防止重复弹出
											,
											btn : [ '确定', '关闭' ],
											btnAlign : 'c',
											moveType : 1 //拖拽模式，0或者1
											,
											content : '<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4><header class="am-header"> <h1>支付宝电脑网站支付体验入口页</h1> </header> <div id="main"><div id="tabhead" class="tab-head"><h2 id="tab1" class="selected" name="tab">付 款</h2></div> <form name=alipayment action=alipay.trade.page.pay.jsp method=post target="_blank"> <div id="body1" class="show" name="divcontent"> <dl class="content"> <dt>商户订单号 ：</dt> <dd> <input id="WIDout_trade_no" name="WIDout_trade_no" /> </dd> <hr class="one_line"> <dt>订单名称 ：</dt> <dd> <input id="WIDsubject" name="WIDsubject" /> </dd> <hr class="one_line"> <dt>付款金额 ：</dt> <dd> <input id="WIDtotal_amount" name="WIDtotal_amount" /> </dd> <hr class="one_line"> <dt>商品描述：</dt> <dd> <input id="WIDbody" name="WIDbody" value="'+keywords+'"/> </dd> <hr class="one_line"> <dt></dt> <dd id="btn-dd"> <span class="new-btn-login-sp"> <button class="new-btn-login" type="submit" style="text-align: center;">付 款</button> </span> <span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span> </dd> </dl> </div> </form> </div><br>支付密码：<input type="password" id="paycode" placeholder="请输入支付密码"><br> </body>',
											success : function(layero) {
												var btn = layero
														.find('.layui-layer-btn');
												btn
														.find(
																'.layui-layer-btn0')
														.click(
																function() {
																	$
																			.post(
																					"bank1_2.do",
																					{
																						"paycode" : $(
																								'#paycode')
																								.val()
																					},
																					function(
																							data) {
																						if (data == 1) {
																							alert("充值成功");
																							$(
																									'#form1')
																									.submit();
																						} else {
																							alert("密码错误");
																						}
																					})
																});
											}
										});
								GetDateNow();
							}
						};

						$('#layerDemo .layui-btn').on(
								'click',
								function() {
									var othis = $(this), method = othis
											.data('method');
									active[method] ? active[method].call(this,
											othis) : '';
								});
					});
</script>
<script language="javascript">
	var tabs = document.getElementsByName('tab');
	var contents = document.getElementsByName('divcontent');
	
	(function changeTab(tab) {
	    for(var i = 0, len = tabs.length; i < len; i++) {
	        tabs[i].onmouseover = showTab;
	    }
	})();
	
	function showTab() {
	    for(var i = 0, len = tabs.length; i < len; i++) {
	        if(tabs[i] === this) {
	            tabs[i].className = 'selected';
	            contents[i].className = 'show';
	        } else {
	            tabs[i].className = '';
	            contents[i].className = 'tab-content';
	        }
	    }
	}
	
	function GetDateNow() {
		var vNow = new Date();
		var sNow = "";
		sNow += String(vNow.getFullYear());
		sNow += String(vNow.getMonth() + 1);
		sNow += String(vNow.getDate());
		sNow += String(vNow.getHours());
		sNow += String(vNow.getMinutes());
		sNow += String(vNow.getSeconds());
		sNow += String(vNow.getMilliseconds());
		document.getElementById("WIDout_trade_no").value =  sNow;
		document.getElementById("WIDsubject").value = "充值";
		document.getElementById("WIDtotal_amount").value = $('#money').val();
	}
	
</script>
</head>
<body class="layui-layout-body">
	<form action="bank1_1.do" id="form1" method="post" name="form1">
		<table width="765" height="333" border="0">
			<tr>
				<td width="120" height="47" align="right">汇款日期：</td>
				<td width="230" align="left"><input style="border: 0px;"
					type="text" readonly="readonly" name="date" id="date"
					value="<%=new java.sql.Timestamp(System.currentTimeMillis()).toString().substring(0, 10)%>"></td>
				<td width="393" align="left">&nbsp;</td>
			</tr>
			<tr>
				<td height="51" align="right">汇款金额：</td>
				<td align="left"><input id="money" name="money" type="text"
					size="32" /></td>
				<td align="left">（CNY）</td>
			</tr>
			<tr>
				<td height="144" align="right">摘要：</td>
				<td align="left"><textarea id="keywords" name="keywords"
						cols="35" rows="5"></textarea></td>
				<td align="left">&nbsp;</td>
			</tr>
		</table>
	</form>
	<table>
		<tr>
			<td width="120" height="47" align="right"></td>
			<td width="230" align="left">
				<div class="site-demo-button" id="layerDemo"
					style="margin-bottom: 0;">
					<button data-method="notice" class="layui-btn">提交</button>
				</div>
			</td>
			<td width="393" align="left">&nbsp;</td>
		</tr>
	</table>



</body>
</html>